<%@page import="com.cloudbroker.bcs.platform.dav.configure.define.XMLConfigParser"%>
<%@ page session="false" language="java"
	contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<link href="/css/global.css" rel="stylesheet">
<link href="/css/jquery.tzCheckbox.css" rel="stylesheet">
<script src="/js/jquery.js"></script>
<script src="/js/jquery-validation/jquery.validate.min.js"></script>
<script src="/js/jquery-validation/additional-methods.js"></script>
<script src="/js/jquery-validation/messages_zh.js"></script>
<script src="/js/plugins.js"></script>
<style>
div.itemL {
	padding: 0 0 20px 100px;
	position: relative
}

div.item span.itemName {
	min-width: 180px;
	float: left;
	text-align: right;
	margin: 0 10px 0 -100px;
	height: 28px;
	line-height: 28px;
	font-weight: bold
}

input[type="text"],input[type="password"] {
	height: 18px;
	width: 300px;
	border: none;
	border: 1px solid #ccc;
	padding: 4px 5px;
}
</style>
</head>
<body>
	<%
	    String catalogId = request.getParameter("catalogId");
	%>
	<div class="mainCont">
		<a href="index" class="back">&lt;返回</a>
		<form id="modifyConfigure" action="" method="POST">
			<%=XMLConfigParser.getConfigureHTML(catalogId)%>
			<input type="hidden" name="catalogId" value="<%=catalogId%>">
		</form>
		<div class="confirmC">
			<a class="btn blueBtn edit-btn" href="javascript:void(0);"
				onClick="submit_modify()"><em>确认</em></a> <a
				class="btn btn edit-btn" href="index"><em>取消</em></a>
		</div>
	</div>


	<script>
        (function($) {
            $.fn.serializeJson = function() {
                var serializeObj = {};
                var array = this.serializeArray();
                $(array).each(function() {
                    if (serializeObj[this.name]) {
                        if ($.isArray(serializeObj[this.name])) {
                            serializeObj[this.name].push(this.value);
                        } else {
                            serializeObj[this.name] = [ serializeObj[this.name], this.value ];
                        }
                    } else {
                        serializeObj[this.name] = this.value;
                    }
                });
                return serializeObj;
            };
        })(jQuery);
        
        $(function() {
            $('select').diySelect({
                width : 276,
                style : 'margin:0 10px 0 0'
            });
            
            $('.relatedTrigger').change();
        });
        
        function modifySubmit(form) {
            var formObj = $(form);
            var data = formObj.serializeJson();
            console.log(data);
            $.ajax({
                type : "post",
                data : data,
                dataType : "json",
                url : "save",
                success : function(data) {
                    if (data.errorNo == 0) {
                        TIP.show(this, {
                            tipType : "suc",
                            width : 200,
                            tipText : "修改成功"
                        }).closeDelay(2000, false, function() {
                            window.location.href = "index";
                        });
                    } else {
                        TIP.show(this, {
                            tipType : "warn",
                            width : 200,
                            tipText : "修改配置失败(" + data.errorNo + ")",
                        }).closeDelay(1500);
                    }
                },
                error : function(jqXHR, textStatus, errorThrown) {
                    TIP.show(this, {
                        tipType : "warn",
                        width : 200,
                        tipText : "修改配置失败(" + textStatus + ")",
                    }).closeDelay(1500);
                }
            });
        }

        $("#modifyConfigure").validate({
            errorClass : 'validate-fail',
            validClass : 'validate-pass',
            errorElement : 'label',
            submitHandler : function(form) {
                modifySubmit(form);
            }
        });
        
        function onCheckboxSwitch(ctnEle) {
            var eleObj = $(ctnEle);
            eleObj.toggleClass('checked');
            var optionCtns = eleObj.find('.tzCBContent');
            optionCtns.toggle();
            optionCtns.each(function() {
                var optionCtn = $(this);
                optionCtn.find(':radio').prop('checked', !optionCtn.is(':hidden'));
            });
        }

        function displayItem(itemId) {
            $('#' + itemId).toggle();
        }

        function submit_modify() {
            $('#modifyConfigure').submit();
        }

        function onOptionChanged(optionsCtn, optionSelect) {
            var optionsCtnObj = $(optionsCtn);
            var allOptions = optionsCtnObj.find(optionSelect);
            var selectedOptions, unselectedOptions;
            if ('option' == optionSelect) {
                selectedOptions = allOptions.filter(':selected');
                unselectedOptions = allOptions.not(':selected');
            } else if (':radio' == optionSelect) {
                selectedOptions = allOptions.filter(':checked');
                unselectedOptions = allOptions.not(':checked');
            } else {
                return;
            }
            
            var optionsCtnId = optionsCtnObj.attr('id');
            
            unselectedOptions.each(function() {
                var related = $(this).attr('related');
                if (related) {
                    var relatedArr = related.split(',');
                    $.each(relatedArr, function(i, n) {
                        var relatedUnitObj = $('#' + n);
                        var activeRef = relatedUnitObj.data('activeRef');
                        if (activeRef) {
                            delete activeRef[optionsCtnId];
                        }
                        if ($.isEmptyObject(activeRef)) {
                            relatedUnitObj.hide();
                            relatedUnitObj.find('input,select').attr('disabled', 'disabled');
                        }
                    });
                }
            });
            
            selectedOptions.each(function() {
                var related = $(this).attr('related');
                if (related) {
                    var relatedArr = related.split(',');
                    $.each(relatedArr, function(i, n) {
                        var relatedUnitObj = $('#' + n);
                        var activeRef = relatedUnitObj.data('activeRef');
                        if (!activeRef) {
                            activeRef = {};
                            relatedUnitObj.data('activeRef', activeRef);
                        }
                        activeRef[optionsCtnId] = '1';
                        relatedUnitObj.show();
                        relatedUnitObj.find('input,select').removeAttr('disabled');
                    });
                }
            });
        }
    </script>

</body>
</html>
